<template>
  <div class="dashboard">
    <!-- 页面头部 -->
    <!-- <div class="page-header">
      <h1>仪表盘</h1>
      <p>欢迎使用管理系统，这里是系统概览</p>
    </div> -->

    <div class="dashboard-container">
      <!-- 统计卡片区域 -->
      <div class="stats-section">
        <n-grid :cols="4" :x-gap="20" :y-gap="20" responsive="screen">
          <n-grid-item v-for="(stat, index) in statsData" :key="index" v-motion :initial="{ opacity: 0, y: 50 }"
            :enter="{ opacity: 1, y: 0, transition: { delay: index * 100 } }">
            <n-card class="stat-card" hoverable>
              <div class="stat-content">
                <div class="stat-icon" :style="{ background: stat.gradient }">
                  <n-icon :component="stat.icon" size="24" />
                </div>
                <div class="stat-info">
                  <div class="stat-value">{{ stat.value }}</div>
                  <div class="stat-label">{{ stat.label }}</div>
                  <div class="stat-change" :class="stat.changeType">
                    <n-icon :component="stat.changeIcon" size="12" />
                    {{ stat.change }}
                  </div>
                </div>
              </div>
            </n-card>
          </n-grid-item>
        </n-grid>
      </div>

      <!-- 图表区域 -->
      <div class="charts-section">
        <n-grid :cols="12" :x-gap="20" :y-gap="20">
          <!-- 销售趋势图 -->
          <n-grid-item :span="8">
            <n-card title="销售趋势" class="chart-card" hoverable>
              <template #header-extra>
                <n-button-group size="small">
                  <n-button :type="timeRange === '7d' ? 'primary' : 'default'" @click="timeRange = '7d'">7天</n-button>
                  <n-button :type="timeRange === '30d' ? 'primary' : 'default'"
                    @click="timeRange = '30d'">30天</n-button>
                  <n-button :type="timeRange === '90d' ? 'primary' : 'default'"
                    @click="timeRange = '90d'">90天</n-button>
                </n-button-group>
              </template>
              <div class="chart-container" ref="salesChartRef"></div>
            </n-card>
          </n-grid-item>

          <!-- 订单状态分布 -->
          <n-grid-item :span="4">
            <n-card title="订单状态分布" class="chart-card" hoverable>
              <div class="chart-container" ref="orderChartRef"></div>
            </n-card>
          </n-grid-item>

          <!-- 用户增长趋势 -->
          <!-- <n-grid-item :span="6">
            <n-card title="用户增长趋势" class="chart-card" hoverable>
              <div class="chart-container" ref="userChartRef"></div>
            </n-card>
          </n-grid-item> -->

          <!-- 商品分类销售 -->
          <!-- <n-grid-item :span="6">
            <n-card title="商品分类销售" class="chart-card" hoverable>
              <div class="chart-container" ref="categoryChartRef"></div>
            </n-card>
          </n-grid-item> -->
        </n-grid>
      </div>

      <!-- 快速操作区域 -->
      <div class="actions-section">
        <n-card title="快速操作" class="action-card" hoverable>
          <n-grid :cols="4" :x-gap="16" :y-gap="16">
            <n-grid-item v-for="(action, index) in quickActions" :key="index" v-motion
              :initial="{ opacity: 0, scale: 0.8 }"
              :enter="{ opacity: 1, scale: 1, transition: { delay: index * 50 } }">
              <div class="action-item" @click="handleQuickAction(action.key)">
                <div class="action-icon" :style="{ background: action.gradient }">
                  <n-icon :component="action.icon" size="20" />
                </div>
                <div class="action-text">{{ action.label }}</div>
              </div>
            </n-grid-item>
          </n-grid>
        </n-card>
      </div>

      <!-- 最新动态区域 -->
      <div class="activity-section">
        <n-grid :cols="2" :x-gap="20">
          <!-- 最新订单 -->
          <!-- <n-grid-item>
            <n-card title="最新订单" class="activity-card" hoverable>
              <template #header-extra>
                <n-button text @click="router.push({ name: 'OrderManagement' })">
                  查看全部
                  <template #icon>
                    <n-icon><ArrowForwardOutline /></n-icon>
                  </template>
                </n-button>
              </template>
              <n-list>
                <n-list-item v-for="order in recentOrders" :key="order.id">
                  <template #prefix>
                    <n-avatar :src="order.avatar" size="small" round />
                  </template>
                  <n-thing>
                    <template #header>{{ order.customerName }}</template>
                    <template #description>{{ order.productName }}</template>
                    <template #footer>
                      <n-time :time="order.createTime" relative />
                      <n-tag :type="order.statusType" size="small" style="margin-left: 8px">
                        {{ order.statusText }}
                      </n-tag>
                    </template>
                  </n-thing>
                </n-list-item>
              </n-list>
            </n-card>
          </n-grid-item> -->

          <!-- 系统通知 -->
          <!-- <n-grid-item>
            <n-card title="系统通知" class="activity-card" hoverable>
              <template #header-extra>
                <n-button text>
                  查看全部
                  <template #icon>
                    <n-icon><ArrowForwardOutline /></n-icon>
                  </template>
            </n-button>
              </template>
              <n-list>
                <n-list-item v-for="notice in systemNotices" :key="notice.id">
                  <template #prefix>
                    <n-icon :component="notice.icon" :color="notice.color" size="18" />
                  </template>
                  <n-thing>
                    <template #header>{{ notice.title }}</template>
                    <template #description>{{ notice.content }}</template>
                    <template #footer>
                      <n-time :time="notice.createTime" relative />
                    </template>
                  </n-thing>
                </n-list-item>
              </n-list>
            </n-card>
          </n-grid-item> -->
        </n-grid>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { useMessage } from 'naive-ui'
import * as echarts from 'echarts'
import {
  StatsChartOutline,
  DocumentTextOutline,
  PeopleOutline,
  CubeOutline,
  AddOutline,
  CreateOutline,
  SettingsOutline,
  CloudDownloadOutline,
  TrendingUpOutline,
  TrendingDownOutline,
  ArrowForwardOutline,
  NotificationsOutline,
  WarningOutline,
  CheckmarkCircleOutline
} from '@vicons/ionicons5'

const router = useRouter()
const message = useMessage()

// 图表引用
const salesChartRef = ref<HTMLElement>()
const orderChartRef = ref<HTMLElement>()
const userChartRef = ref<HTMLElement>()
const categoryChartRef = ref<HTMLElement>()

// 时间范围
const timeRange = ref('30d')

// 统计数据
const statsData = [
  {
    label: '总销售额',
    value: '¥2,456,789',
    change: '+12.5%',
    changeType: 'increase',
    changeIcon: TrendingUpOutline,
    icon: StatsChartOutline,
    gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
  },
  {
    label: '订单数量',
    value: '8,642',
    change: '+8.2%',
    changeType: 'increase',
    changeIcon: TrendingUpOutline,
    icon: DocumentTextOutline,
    gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
  },
  {
    label: '用户总数',
    value: '15,234',
    change: '+15.3%',
    changeType: 'increase',
    changeIcon: TrendingUpOutline,
    icon: PeopleOutline,
    gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
  },
  {
    label: '商品数量',
    value: '2,345',
    change: '-2.1%',
    changeType: 'decrease',
    changeIcon: TrendingDownOutline,
    icon: CubeOutline,
    gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)'
  }
]

// 快速操作
const quickActions = [
  {
    key: 'add-product',
    label: '新增商品',
    icon: AddOutline,
    gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
  },
  {
    key: 'add-order',
    label: '创建订单',
    icon: CreateOutline,
    gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
  },
  // {
  //   key: 'export-data',
  //   label: '导出数据',
  //   icon: CloudDownloadOutline,
  //   gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
  // },
  // {
  //   key: 'system-settings',
  //   label: '系统设置',
  //   icon: SettingsOutline,
  //   gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)'
  // }
]

// 最新订单
const recentOrders = [
  {
    id: 1,
    customerName: '张三',
    productName: 'iPhone 15 Pro',
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=1',
    createTime: new Date(Date.now() - 5 * 60 * 1000),
    statusType: 'success',
    statusText: '已完成'
  },
  {
    id: 2,
    customerName: '李四',
    productName: '华为MateBook X',
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=2',
    createTime: new Date(Date.now() - 15 * 60 * 1000),
    statusType: 'info',
    statusText: '已付款'
  },
  {
    id: 3,
    customerName: '王五',
    productName: '小米平板6',
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=3',
    createTime: new Date(Date.now() - 30 * 60 * 1000),
    statusType: 'warning',
    statusText: '待付款'
  }
]

// 系统通知
const systemNotices = [
  {
    id: 1,
    title: '系统维护通知',
    content: '系统将于今晚22:00-24:00进行维护升级',
    icon: WarningOutline,
    color: '#f0a020',
    createTime: new Date(Date.now() - 2 * 60 * 60 * 1000)
  },
  {
    id: 2,
    title: '备份完成',
    content: '数据库备份已成功完成',
    icon: CheckmarkCircleOutline,
    color: '#18a058',
    createTime: new Date(Date.now() - 4 * 60 * 60 * 1000)
  },
  {
    id: 3,
    title: '新功能上线',
    content: '图片管理功能已正式上线',
    icon: NotificationsOutline,
    color: '#2080f0',
    createTime: new Date(Date.now() - 6 * 60 * 60 * 1000)
  }
]

// 初始化销售趋势图
const initSalesChart = () => {
  if (!salesChartRef.value) return

  const chart = echarts.init(salesChartRef.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ['销售额', '订单量']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: [
      {
        type: 'value',
        name: '销售额(万元)',
        position: 'left'
      },
      {
        type: 'value',
        name: '订单量',
        position: 'right'
      }
    ],
    series: [
      {
        name: '销售额',
        type: 'line',
        smooth: true,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(102, 126, 234, 0.3)' },
            { offset: 1, color: 'rgba(102, 126, 234, 0.1)' }
          ])
        },
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: '订单量',
        type: 'line',
        smooth: true,
        yAxisIndex: 1,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(240, 147, 251, 0.3)' },
            { offset: 1, color: 'rgba(240, 147, 251, 0.1)' }
          ])
        },
        data: [220, 182, 191, 234, 290, 330, 310]
      }
    ]
  }
  chart.setOption(option)
}

// 初始化订单状态分布图
const initOrderChart = () => {
  if (!orderChartRef.value) return

  const chart = echarts.init(orderChartRef.value)
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: '已完成' },
          { value: 735, name: '已付款' },
          { value: 580, name: '已发货' },
          // { value: 484, name: '待付款' },
          // { value: 300, name: '已取消' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  chart.setOption(option)
}

// 初始化用户增长趋势图
const initUserChart = () => {
  if (!userChartRef.value) return

  const chart = echarts.init(userChartRef.value)
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147],
        type: 'bar',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#4facfe' },
            { offset: 1, color: '#00f2fe' }
          ])
        }
      }
    ]
  }
  chart.setOption(option)
}

// 初始化商品分类销售图
const initCategoryChart = () => {
  if (!categoryChartRef.value) return

  const chart = echarts.init(categoryChartRef.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: ['电子产品', '服装配饰', '家居用品', '运动户外', '美妆护肤']
    },
    series: [
      {
        type: 'bar',
        data: [320, 302, 301, 334, 390],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#43e97b' },
            { offset: 1, color: '#38f9d7' }
          ])
        }
      }
    ]
  }
  chart.setOption(option)
}

// 处理快速操作
const handleQuickAction = (key: string) => {
  switch (key) {
    case 'add-product':
      router.push({ name: 'ProductManagement' })
      message.success('跳转到商品管理')
      break
    case 'add-order':
      router.push({ name: 'OrderManagement' })
      message.success('跳转到订单管理')
      break
    case 'export-data':
      message.info('导出数据功能')
      break
    case 'system-settings':
      router.push({ name: 'SystemManagement' })
      message.success('跳转到系统管理')
      break
  }
}

onMounted(async () => {
  await nextTick()
  initSalesChart()
  initOrderChart()
  initUserChart()
  initCategoryChart()
})
</script>

<style scoped>
.dashboard {
  height: 100%;
  padding: 0;
  background: transparent;
  overflow-y: auto;
  position: relative;
  z-index: 1;
}

.page-header {
  margin-bottom: var(--spacing-lg);
}

.page-header h1 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--text-color-primary);
}

.page-header p {
  margin: 0;
  color: var(--text-color-secondary);
  font-size: 14px;
}

.dashboard-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
}

.stats-section {
  flex-shrink: 0;
}

.stat-card {
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid var(--border-color-tertiary);
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-color-primary);
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: var(--text-color-secondary);
  margin-bottom: 8px;
}

.stat-change {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
}

.stat-change.increase {
  color: #18a058;
}

.stat-change.decrease {
  color: #d03050;
}

.charts-section {
  flex: 1;
  min-height: 400px;
}

.chart-card {
  border-radius: 16px;
  height: 100%;
  transition: all 0.3s ease;
}

.chart-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.chart-container {
  height: 300px;
  width: 100%;
}

.actions-section {
  flex-shrink: 0;
}

.action-card {
  border-radius: 16px;
  transition: all 0.3s ease;
}

.action-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--bg-color-primary);
  border: 1px solid var(--border-color-tertiary);
}

.action-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  background: var(--bg-color-secondary);
}

.action-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.action-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color-primary);
  text-align: center;
}

.activity-section {
  flex-shrink: 0;
}

.activity-card {
  border-radius: 16px;
  height: 100%;
  transition: all 0.3s ease;
}

.activity-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .stats-section :deep(.n-grid) {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .charts-section :deep(.n-grid-item[span="8"]) {
    grid-column: span 12 !important;
  }

  .charts-section :deep(.n-grid-item[span="4"]) {
    grid-column: span 12 !important;
  }

  .charts-section :deep(.n-grid-item[span="6"]) {
    grid-column: span 12 !important;
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    gap: 16px;
  }

  .stats-section :deep(.n-grid) {
    grid-template-columns: 1fr !important;
  }

  .stat-content {
    gap: 12px;
    padding: 4px;
  }

  .stat-icon {
    width: 48px;
    height: 48px;
  }

  .stat-value {
    font-size: 20px;
  }

  .chart-container {
    height: 250px;
  }

  .action-item {
    padding: 16px;
  }

  .action-icon {
    width: 40px;
    height: 40px;
  }

  .activity-section :deep(.n-grid) {
    grid-template-columns: 1fr !important;
  }
}
</style>